<template>

	<div>
		
		<span v-for="(page,index) in pages" 
		:class=" selected==page?'active':''  "  
		@click="changeSelected(page)">{{page}}</span>
		
	</div>
	
	
</template>

<script>
	export default{
		name:'MyPage',
		props:["pages"],
		data(){
			return {
				selected:1
				
			}
		},
		methods:{
			changeSelected(index){
				if(this.selected == index){
					return;
				}
				
				this.selected = index;
				
				//生成发送一个事件
				//生成一个事件  click  blur mouse,,,,,,
				//事件传递参数
				this.$emit('changeCurrent',this.selected)
				//直接修改 currnet
			}
		}
	}
	
	
</script>

<style scoped>
	span{
		display: inline-block;
		padding:10px;
		border-bottom:dashed 1px red;
		width:20px;
		height:20px;
		/* box-sizing:content-box; */
		line-height:20px;
		text-align:center;
		cursor:pointer;
	}
	span:hover{
		background-color: #666;
	}
	.active{
		
		background-color: #105366;
		color:white;
		border:solid 1px grey;
	}
	
	
</style>